<template>
    <div class="application" v-if="isShowPage">
        <Header></Header>
        <div class="container">
            <div class="title">
                <p>{{ contestTitle }}</p>
            </div>
            <div class="tips">
                <div class="left-title">
                    <p>报名</p>
                </div>
            </div>
            <div class="form">
                <el-form ref="ruleFormRef" style="width: 100%" :model="ruleForm" :rules="rules" label-width="auto" class="demo-ruleForm" status-icon>
                    <el-form-item v-for="d in templateData" :label="d.name" :prop="d.name">
                        <el-input v-model="ruleForm[d.name]" />
                    </el-form-item>
                </el-form>
            </div>
            <div class="application-bth">
                <el-button type="primary" @click="submitForm(ruleFormRef)"> 确认报名 </el-button>
            </div>
        </div>
        <Footer></Footer>
    </div>
</template>

<script setup lang="ts">
import { SubmitApplicationParams, applicationAPI, dataFormTemplateT, submitApplicationAPI } from "@/api/contest";
import { ElMessage, FormInstance, FormRules } from "element-plus";
import { onMounted, reactive, ref } from "vue";
import { useRoute, useRouter } from "vue-router";

type formItem = {
    姓名?: string;
    身高?: string;
    学历?: number | null;
};
const route = useRoute();
const router = useRouter();
const contestTitle = ref("");
const ruleForm = reactive({});
const ruleFormRef = ref<FormInstance>();
const rules = reactive<FormRules<formItem>>({});
const templateData = ref<dataFormTemplateT[]>();
const formTemplate = ref("");
const isShowPage = ref(false);

const submitForm = async (formEl: FormInstance | undefined) => {
    if (!formEl) return;
    await formEl.validate(valid => {
        if (valid) {
            application();
        }
    });
};
async function application() {
    for (let k in ruleForm) {
        const val = ruleForm[k];
        const d = templateData.value?.find(d => d.name === k);
        d!["value"] = val;
    }
    const data: SubmitApplicationParams = {
        activityId: route.query.detailId as unknown as string,
        applyStatus: 0,
        enrollTime: "2024-5-20",
        isUse: 0,
        singleNo: "",
        templateValueList: templateData.value,
        type: route.query.type as unknown as string,
    };
    const res = await submitApplicationAPI(data);
    if (res.data.code === 200) {
        ElMessage({
            message: "您已报名成功!",
            icon: "success",
        });
        router.push("/index");
    } else {
        ElMessage({
            message: res.data.msg,
            icon: "error",
        });
    }
}

function genForm() {
    formTemplate.value = ``;
    templateData.value?.forEach(d => {
        rules[d.name] = [{ required: !d.required, message: `请填写${d.name}`, trigger: "blur" }];
        ruleForm[d.name] = "";
    });
    isShowPage.value = true;
}

async function getApplicationInfo() {
    const detailId = route.query.detailId as unknown as number;
    const type = route.query.type as unknown as number;
    contestTitle.value = route.query.title as unknown as string;
    const res = await applicationAPI(detailId!, type!);
    if (!res.data.data) return;
    templateData.value = JSON.parse(res.data.data.template);
    console.log(templateData.value);
    genForm();
}

onMounted(() => {
    getApplicationInfo();
});
</script>

<style lang="scss" scoped>
.application {
    .container {
        width: 50%;
        margin: 0 auto;
        .title {
            font-size: 32px;
            color: #000;
            font-weight: bold;
            margin: 50px 0;
        }
        .tips {
            display: flex;
            align-items: center;
            justify-content: space-between;
            .left-title {
                font-size: 24px;
                color: #666;
                padding-left: 5px;
                border-left: 5px solid $main-color;
            }
        }
        .form {
            margin: 40px 0;
            :deep(.el-form) {
                display: flex;
                align-items: center;
                justify-content: space-between;
                flex-wrap: wrap;
            }
            :deep(.el-form-item) {
                margin: 20px 0;
                display: block;
                flex-basis: 48%;
                .el-form-item__label-wrap {
                    margin-left: 0 !important;
                }
            }
            :deep(.el-input) {
                height: 40px;
            }
        }
        .application-bth {
            display: flex;
            align-items: center;
            justify-content: flex-end;
            margin: 20px 0;
            :deep(.el-button) {
                width: 120px;
                height: 40px;
            }
        }
    }
}
</style>
